<template>
  <view>
    <view class="safe-area-inset-bottom">
		<uni-nav-bar :fixed="true" backgroundColor="#00a660" color="#fff" height="90rpx">
		  <block slot="left">
		    <i class="iconfont nav_backIcon" @click="toBack">&#xe8b8;</i>
		    <span style="font-size: 30rpx;">收货地址</span>
		  </block>
		  <block slot="right">
		    <view class="nav_btn">
		      <button
		          @click="handleAdd"
		          class="nextBtn"
		          size="mini"><i class="iconfont" style="color: #fff;">&#xeaf3;</i>新增
		      </button>
		    </view>
		  </block>
		</uni-nav-bar>
      <view class="swip_header" style="top:50px;">
        <view class="slot-box">
          <view style="width: 100%;">
            <uni-search-bar
                v-model="queryParams.name"
                type="text"
                @confirm="handleQuery"
                @input="handleQuery"
                placeholder="请输入收货人名称"
            />
          </view>
        </view>
      </view>
      <!-- 列表 -->
      <view v-if="!!dataList && dataList.length > 0" class="listSearchTop">
        <uni-card :is-shadow="false" v-for="(item,index) in dataList" :key="index">
          <p class="grid-integral">收货人：{{ item.name }}</p>
          <p class="grid-integral">手机号码：{{ item.mobile }}</p>
          <p class="grid-integral">所在地区：{{ item.region }}</p>
          <p class="grid-hidden">详细地址：{{ item.address }}</p>
          <p class="grid-integral" style="margin-top: 0;">创建时间：{{ item.createTime }}</p>
          <view slot="actions" class="card-actions" style="padding: 0 20rpx;">
			<view>
				默认地址：
				<span @click="switchChange(item)">
					<switch color="#00a660" style="transform:scale(0.7)" :checked="item.isDefault == 1 ? true : false" disabled/>
				</span>
			</view>
			<view class="flex_between">
				
            <view class="card-actions-item" @click="handleUpdate(item)">
              <text class="card-actions-item-text themeColor">修改</text>
            </view>
            <view class="card-actions-item" @click="handleDelete(item,index)" style="margin-right: 0;">
              <text class="card-actions-item-text errorColor">删除</text>
            </view>
			</view>
          </view>
        </uni-card>
        <!-- 加载更多 -->
        <uni-load-more color="#00a660" :status="loadStatus"/>
      </view>
      <!-- 暂无数据 -->
      <luanqingEmpty :show="true" text="没有更多数据啦" v-else/>
    </view>
    <!-- 新增/修改 收获的地址 -->
    <modify-address ref="modifyAddress" @success="handleQuery"></modify-address>
  </view>
</template>

<script>
import {
  delStaffAddress,
  getStaffAddress,
  listStaffAddress,
  updateStaffAddress
} from "@/api/ec/person/user/staffAddress";
import luanqingEmpty from '@/components/luanqing-empty/luanqing-empty';
import modifyAddress from "./modifyAddress";

export default {
  components: {luanqingEmpty, modifyAddress},
  data() {
    return {
      // 加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
      loadStatus: 'loading',
      // 数据列表
      dataList: [],
      //总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
      },
    }
  },
  created() {
    this.bindingRefreshData();
    this.getList(true)
  },
  /** 上拉刷新回调 */
  onReachBottom() {
    if (this.loadStatus != 'noMore' && this.total > this.dataList.length) {
      this.loadStatus = 'loading';
      // 延迟500毫秒显示loading效果
      setTimeout(() => {
        // 执行查询的方法
        this.getList(false);
      }, 500)
    } else {
      // 停止加载
      this.loadStatus = 'noMore'
    }
  },
  methods: {
	  /** 返回 */
	  toBack() {
	    // uni.navigateTo({
	    // 	url:'/pages/mine/personal/personalCenter/index'
	    // })
		uni.navigateBack(1)
	  },
    /** 绑定 */
    bindingRefreshData() {
      // 刷新列表数据
      uni.$on('staffAddressRefreshData', () => {
        this.getList(true)
      });
    },
    /** 搜索 */
    handleQuery() {
      this.getList(true);
    },
    /**
     * 查询数据列表
     * @param reload true 重新加载数据； false 加载更多
     */
    getList(reload) {
      if (reload) {
        this.queryParams.pageNum = 1;
        this.loadStatus = 'more'
        this.$modal.loading();
      }
      listStaffAddress(this.queryParams).then(response => {
        if (reload) {
          uni.hideLoading()
        }
        this.total = response.total;
        if (response.total > 0) {
          const dataRows = response.rows;
          this.dataList = reload ? dataRows : this.dataList.concat(dataRows);
        } else {
          this.dataList = [];
        }
        // 判断数据是否加载完全
        if (response.total <= this.dataList.length) {
          this.loadStatus = 'noMore'
        }
        // 页数+1
        this.queryParams.pageNum++
      }).catch(() => {
        if (reload) {
          uni.hideLoading()
        }
      });
    },
    /** 设为默认地址 */
    switchChange(item) {
      let text = item.isDefault == 1 ? "取消默认" : "设置默认";
      let that = this
      uni.showModal({
        title: '提示',
        confirmColor: '#00a660',
        content: '确认要将该收货地址 " ' + text + ' " 吗？',
        success: res=> {
          if (res.confirm) {
            let isDefault = item.isDefault == 1 ? 0 : 1;
            const param = {
              id: item.id,
              isDefault: isDefault
            }
            updateStaffAddress(param).then(response => {
              that.getList(true)
              this.$modal.msg( text + '成功')
            })
          } else if (res.cancel) {
            // item.isDefault = item.isDefault === 1 ? 0 : 1;
          }
        }
      });
    },
    /** 删除 */
    handleDelete(item,index) {
      let that = this
      uni.showModal({
        title: '系统提示',
        confirmColor: '#00a660',
        content: '确定要删除该收货地址吗？ 删除后数据不可恢复，是否确定删除？',
        success: function (res) {
          if (res.confirm) {
            delStaffAddress(item.id).then((response) => {
              that.dataList.splice(index, 1)
              uni.showToast({title: '删除成功'});
            });
          }
        },
      })
    },
    /** 修改 */
    handleUpdate(item) {
      this.$refs.modifyAddress.toOpenDialog(item);
    },
    /** 新增 */
    handleAdd() {
      this.$refs.modifyAddress.toOpenDialog();
    },
  }
}
</script>

<style scoped lang="scss">
	::v-deep .uni-navbar__header-btns-left {
	  width: 220rpx !important;
	}
	
	::v-deep .uni-navbar__header-btns-right {
	  width: 420rpx !important;
	}
::v-deep .uni-card .uni-card__content{
	padding-bottom: 0 !important;
}	
::v-deep .uni-popup .uni-popup__wrapper {
  width: 90% !important;
  padding: 0;
}

</style>
